<template>
	<view  style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 教室的详细信息 -->
		<view class="">
			<view style="display: flex;width: 90%;margin: 0rpx auto;padding: 0 0 10rpx 0; border-bottom-style: solid;border-bottom-color:#F6F6F6;border-bottom-width: 4rpx;">
				<text style="color: blue;font-weight: 700;">教室名称：</text>{{shu1.name}}
			</view>
			<view style="display: flex;width: 90%;margin: 30rpx auto 10rpx auto;padding: 0 0 10rpx 0; border-bottom-style: solid;border-bottom-color:#F6F6F6;border-bottom-width: 4rpx;">
				<text style="color: blue;font-weight: 700;">所属校区：</text>{{shu1.weizhi}}
			</view>
			<view style="display: flex;width: 90%;margin: 30rpx auto 10rpx auto;padding: 0 0 10rpx 0; border-bottom-style: solid;border-bottom-color:#F6F6F6;border-bottom-width: 4rpx;">
				<text style="color: blue;font-weight: 700;">管理老师：</text>{{shu1.guanlilaoshi}}
				<view @click="mobilecall(shu1.guanlilaoshidianhua)" style="margin-left: 50rpx;">{{shu1.guanlilaoshidianhua.substring(0,3)}}****{{shu1.guanlilaoshidianhua.substring(shu1.guanlilaoshidianhua.length-4,shu1.guanlilaoshidianhua.length)}}
				<uni-icons style="font-size: 40rpx;" type="phone"></uni-icons>
				</view>
			</view>
			<view style="display: flex;width: 90%;margin: 30rpx auto 10rpx auto;padding: 0 0 10rpx 0; border-bottom-style: solid;border-bottom-color:#F6F6F6;border-bottom-width: 4rpx;align-items: center;">
				<text style="color: blue;font-weight: 700;margin-right: 50rpx;">排课情况：</text>
				<view style="display: flex;flex-direction: row;">
					<view style="display: flex;margin-right: 20rpx; background-color: blue;border-radius: 20rpx;padding: 10rpx 20rpx;color: white;align-items: center;justify-content: center;font-size: 25rpx;" @click="paike">
						添加排课
					</view>
				</view>
			</view>
		</view>
		
		<view class="">
			
			<!-- 显示排课列表 表头-->
			<view style="display: flex;width: 85%;margin: 20rpx auto;">
				<view style="display: flex;flex:4;">
					时间
				</view>
				<view style="display: flex;flex: 4;justify-content: center;">
					课程
				</view>
			</view>
			
			<!-- 显示排课列表 内容 -->
			<view  v-for="(item,index) in paikelist"  :key=index  style="display: flex;flex-direction: row;background-color: white;border-radius: 20rpx;padding: 20rpx;margin: 10rpx auto;width: 85%;box-shadow: 0 0 20px #efefef;align-items: center; " v-if="item.data.length!==0" >
				<view style="display: flex;flex: 1;align-items: center;">
					{{index=="res1"?"周一":index=="res2"?"周二":index=="res3"?"周三":index=="res4"?"周四":index=="res5"?"周五":index=="res6"?"周六":'周日'}}
				</view>
				<view style="display: flex;flex-direction: column;flex:6;">
					<view v-for="(i,k) in item.data" :key=k style="display: flex;margin-bottom: 10rpx;flex-direction: column;"  @click="xiugaishanchu(i)">
						<view style="display: flex;flex-direction: row;width: 100%;">
							<view style="display: flex;flex:2; flex-direction: row;align-items: center;">
								<view >
									{{i.qishitime}}→{{i.jieshutime}}
								</view>
							</view>						
							<view style="display: flex;flex:3;justify-content: center;">
								{{i.kecheng}}
							</view>
						</view>
						<view v-if="k+1!==item.data.length" style="display: flex;width: 100%;background-color: #efefef;height: 3rpx;margin-top: 10rpx;">
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 下面是添加排课出现的弹窗 -->
		<model v-if='show1' @colseModel='show1 = false'>
			<view style="display: flex;background-color:blue;color: white;border-radius: 20rpx;padding: 15rpx ; margin: 25rpx auto;justify-content: center;">
				给【{{shu1.weizhi}}】的【{{shu1.name}}】排课！
			</view>
			<view style="display: flex;margin-bottom: 30rpx;">选择周几</view>
				<picker @change="xuanzhouji" :value="shu2" :range="list">
					<uni-easyinput type="text" v-model="zhouji" suffixIcon="bottom"/>
				</picker>
			<view style="display: flex;margin-bottom: 30rpx;">选择上课时间</view>
				<picker mode="time" :value="time1" start="07:00" end="21:00" @change="bindTimeChange">
					<uni-easyinput type="text" v-model="qishitime" suffixIcon="bottom" />
				</picker>
			<view style="display: flex;margin-bottom: 30rpx;">选择下课时间</view>
				<picker mode="time" :value="time2" start="07:00" end="23:00" @change="bindTimeChange2">
					<uni-easyinput type="text" v-model="jieshutime" suffixIcon="bottom" />
				</picker>
			<view style="display:flex;align-items: center;margin: 25rpx 0;">
				<view style="display: flex;margin-bottom: 10rpx;margin-top:20rpx;align-items: flex-end;">
					选择课程
					<text style="color: darkgrey;font-size: 27rpx;margin-left: 15rpx;">(可输入查询词精准查询)</text>
				</view>
			</view>
			<view style="display: flex;align-items: center;">
				<uni-easyinput type="text" v-model="kecheng1" />
				
				<picker @change="bindPickerChange" :value="shu3" :range="kechenglist">
					<uni-icons @click="kechengfun" style="font-size: 40rpx;margin-left:40rpx;" type="bottom"></uni-icons>
				</picker>
			</view>
			<view style="display: flex;width: 60%;justify-content: space-around;margin: 30rpx auto;color:white;">
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="show1 = false">取消</view>
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="paike1()">确定</view>
			</view>
		</model>
		
		<!-- 下面是修改排课出现的弹窗 -->
		<model v-if='show2' @colseModel='show2 = false'>
			<view style="display: flex;background-color:blue;color: white;border-radius: 20rpx;padding: 15rpx ; margin: 25rpx auto;justify-content: center;">
				给【{{shu1.weizhi}}】的【{{shu1.name}}】修改排课！
			</view>
			<view style="display: flex;margin-bottom: 10rpx;margin-top:20rpx">选择周几</view>
				<picker @change="xuanzhouji" :value="shu2" :range="list">
					<uni-easyinput type="text" v-model="zhouji" suffixIcon="bottom"/>
				</picker>
			<view style="display: flex;margin-bottom: 10rpx;margin-top:20rpx">选择上课时间</view>
				<picker mode="time" :value="time1" start="07:00" end="21:00" @change="bindTimeChange">
					<uni-easyinput type="text" v-model="qishitime" suffixIcon="bottom" />
				</picker>
			<view style="display: flex;margin-bottom: 10rpx;margin-top:20rpx">选择下课时间</view>
				<picker mode="time" :value="time2" start="07:00" end="21:00" @change="bindTimeChange2">
					<uni-easyinput type="text" v-model="jieshutime" suffixIcon="bottom" />
				</picker>
			<view style="display:flex;align-items: center;margin: 25rpx 0;">
				<view style="display: flex;margin-bottom: 10rpx;margin-top:20rpx;align-items: flex-end;">
					选择课程
					<text style="color: darkgrey;font-size: 27rpx;margin-left: 15rpx;">(可输入查询词精准查询)</text>
				</view>
			</view>
			<view style="display: flex;align-items: center;">
				<uni-easyinput type="text" v-model="kecheng1" />
				<picker @change="bindPickerChange" :value="shu3" :range="kechenglist">
					<uni-icons @click="kechengfun" style="font-size: 40rpx;margin-left:40rpx;" type="bottom"></uni-icons>
				</picker>
			</view>
			
				
			<view style="display: flex;width: 70%;justify-content: space-around;margin: 30rpx auto;color: white;">
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="show2 = false">取消</view>
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="paike2">确定</view>
			</view>
			<view v-if="meiyi_userinfo.permission.indexOf('del_paike')!=-1" style="display: flex;width: 100%;justify-content: center;margin-top: 50rpx;" @click="shanchupaike()">
				删除本排课!!!
			</view>
		</model>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				iskecheng:'',//判断课程为选择，而不是手动输入
				zhouji:'',
				paikelist:[],//排课的列表
				kechenglist:[],//从数据库中获取课程的LIST
				kecheng1:'',
				data:[],
				qishitime:'',//选择起始时间
				jieshutime:'',//选择结束时间
				show1:false,//添加排课出现弹窗
				show2:false,//修改排课出现弹窗
				time1:'',//时间选择
				time2:'',//时间选择
				shu1:[],//接收教室的信息
				shu2:'',//选择的是周几
				shu3:'',//选择的课程几
				shu4:'',//修改排课时，传输排课信息
				list: ['周一','周二','周三','周四','周五','周六','周日'],
			}
		},
		async onLoad() {
			this.meiyi_userinfo = await uniCloud.getCurrentUserInfo()
			let meiyi_name_tel =await uni.getStorageSync('meiyi_name_tel')
			this.paikelaiyuan=await uni.getStorageSync('aoyashengpaikelaiyuan')
			this.shu1=await uni.getStorageSync('aoyashengjiaoshi')
			this.paikelistfun()
			// this.kechengfun()
		},
		methods: {
			// 修改排课,弹窗现，数据读取
			xiugaishanchu(e){
				this.zhouji=e.monthday
				this.show2=true
				this.jieshutime=e.jieshutime
				this.kecheng1=e.kecheng
				this.qishitime=e.qishitime
				this.shu4=e
			},
			//获取符合条件的排课列表，限定校区和教室
			paikelistfun(){
				uni.showLoading({
					title: '加载中……',
					mask: true
				});
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:26,//类型为26时，获取符合条件的排课列表
						xiaoqu:this.shu1.weizhi,
						jiaoshi:this.shu1.name,
						paikelaiyuanid:this.paikelaiyuan._id
					}
				}).then(res=>{
					this.paikelist= res.result;
					uni.hideLoading()
				})
			},
			// 一、paike中修改排课，二、xiugaishuju库添加一条数据
			paike2(){
				if(this.kecheng1!==this.iskecheng){
					return uni.showToast({
						title: '课程须为选择,不能直接输入！',
						icon: 'none',
						duration: 1000
					})
				}
				if(!this.qishitime) {
					uni.showToast({
						title: '请选择上课时间！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.jieshutime) {
					uni.showToast({
						title: '请选择下课时间！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.kecheng1) {
					uni.showToast({
						title: '请选择课程！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.zhouji) {
					uni.showToast({
						title: '请选择周几！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				let detail='教室：'+this.shu1.name
				if(this.shu4.monthday!==this.zhouji){
					detail=detail+'，'+'周几：'+this.shu4.monthday+'→'+this.zhouji
				}
				if(this.shu4.qishitime!==this.qishitime){
					detail=detail+'，'+'上课时间：'+this.shu4.qishitime+'→'+this.qishitime
				}
				if(this.shu4.jieshutime!==this.jieshutime){
					detail=detail+'，'+'下课时间：'+this.shu4.jieshutime+'→'+this.jieshutime
				}
				if(this.shu4.kecheng!==this.kecheng1){
					detail=detail+'，'+'课程：'+this.shu4.kecheng+'→'+this.kecheng1
				}
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:28,//类型为28时，修改排课
						_id:this.shu4._id,
						monthday:this.zhouji,
						kecheng:this.kecheng1,
						qishitime:this.qishitime,
						jieshutime:this.jieshutime,
						jingshouren:this.jingshouren,
						detail:detail,
						riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
						xiaoqu:this.shu4.xiaoqu
						
					}
				}).then(res=>{
					this.show2=false
					this.paikelistfun()
					uni.showToast({
						title: '修改排课成功！',
						icon: 'none',
						duration: 1000
					})
				})
			},
			// paike库中删除排课，二、xiugaishuju库添加一条
			shanchupaike(){
				uni.showModal({
					title: '重要提示',
					content: '再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						let detail='教室：'+this.shu1.name+'，'+'周几：'+this.shu4.monthday+'，上课时间：'+this.shu4.qishitime+'，下课时间：'+this.shu4.jieshutime+'，课程：'+this.shu4.kecheng
						if (res.confirm) {
							uniCloud.callFunction({
								name:"funshare",
								data:{
									leixing:29,//类型为29时，删除排课
									_id:this.shu4._id,
									detail:detail,
									xiaoqu:this.shu4.xiaoqu,
									jingshouren:jingshouren,
									riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
								}
							}).then(res=>{
								this.paikelistfun()
								this.show2=false
								uni.showToast({
									title: '删除排课成功！',
									icon: 'none',
									duration: 1000
								})
							})
							}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 一、paike添加新排课，二、更新xiugaishuju库
			paike1(){
				if(this.iskecheng!=this.kecheng1){
					return uni.showToast({
						title: '课程必须选择,不能手动输入！',
						icon: 'none',
						duration: 1000
					})
				}
				if(!this.shu1.name || !this.shu1.weizhi) {
					uni.showToast({
						title: '校区或教室有误！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.qishitime) {
					uni.showToast({
						title: '请选择上课时间！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.zhouji) {
					uni.showToast({
						title: '请选择周几上课！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.jieshutime) {
					uni.showToast({
						title: '请选择下课时间！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(!this.kecheng1) {
					uni.showToast({
						title: '请选择课程！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				let detail='教室：'+this.shu1.name+'，周几：'+ this.zhouji+'，上课时间：'+ this.qishitime+'，下课时间：'+ this.jieshutime+'，选择课程：'+ this.kecheng1+'，排课来源：'+ this.paikelaiyuan.name
				uniCloud.callFunction({
					name:"funshare",
					data:{
						//类型为25时，添加排课，同时xiugaishuju库加排课记录
						leixing:25,
						xiaoqu:this.shu1.weizhi,
						jiaoshi:this.shu1.name,
						kecheng:this.kecheng1,
						monthday:this.zhouji,
						qishitime:this.qishitime,
						jieshutime:this.jieshutime,
						jingshouren:this.jingshouren,
						detail:detail,
						riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
						paikelaiyuanid:this.paikelaiyuan._id
					}
				}).then(res=>{
					this.show1=false
					this.paikelistfun()
					uni.showToast({
						title: '添加排课成功！',
						icon: 'none',
						duration: 1000
					})
				})
			},
			// 课程的数据库调取
			kechengfun() {
				let arr=[]
				this.kechenglist=[]
				arr.push(this.shu1.weizhi)
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:27,//类型为27时，获取本校区的课程
						xiaoqu:arr,
						key:this.kecheng1
					}
				}).then(res=>{
					res.result.data.map(item => {
						this.kechenglist.push(item.name)
					})
				})
			},
			// 点击出现排课弹窗
			paike(){
				this.show1=true
				this.kecheng1=''
				this.qishitime=''
				this.jieshutime=''
				this.zhouji=''
			},
			//选择课程
			bindPickerChange: function(e) {
				this.iskecheng=this.kecheng1 = this.kechenglist[e.detail.value]
			},
			//选择周几
			xuanzhouji: function(e){
				this.zhouji=this.list[e.detail.value]
			},
			// 选择下课时间
			bindTimeChange2: function(e) {
				this.time2 = e.detail.value
				this.jieshutime=this.time2
				},
			// 选择上课时间
			//选择上课时间
			bindTimeChange: function(e) {
				this.qishitime=this.time1 = e.detail.value
				},
			// 拨打电话
			//点击拨打电话
			mobilecall(mobile){
				uni.makePhoneCall({
				    phoneNumber: mobile
				});
			},
		}
	}
</script>

<style>

</style>
